$header: #2d3559;
$loginName: #fdb43d;
$bodyBg: #eee;
$navActive: #eda940;
$menuBg: #fff;
$menuActiveBg: #388fcd;
$menuText: #000;
$subMenuBg: #3d4b6a;
$lastLocation: #000;
$borderColor: #dcdcdc;
$textColor: #000;
$clabel: #999;
$primaryBtn: #388fcd;
$orangeBtn: #d16318;
$popCancelBtn: #556c88;
$lilaceBtn: #88bcff;
$orderAppealBtn: #f08e3a;
$unread: #ea8025;
$priceColor: #f08e3a;
$tradeBugBg: #fff;
$noOpen: #ccc;
$activeImgBoxBg: #3d4b6a; // 活动公告滚动图背景色
$activeSlideDot: #4e5f86; // 活动公告滚动图滚动点颜色
$activeSlideDotOn: #6176a8; // 活动公告滚动图当前页滚动点颜色
$pageOnText: #fff; // 分页当前页文本颜色
$pageOnBg: #3d4b6a; // 分页当前页背景颜色
$inviteText: #9cc1f5; // 邀请，复制框里的文字颜色
$invitePerson: #88bcff; // 邀请，邀请人数
// common
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

body {
    font-family: NotoMedium;
    font-size: 14px;
    min-width: 1010px;
    background-color: $bodyBg;
}

.li {
    list-style: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.text-c {
    text-align: center;
}

.text-r {
    text-align: right;
}

.none {
    display: none;
}

.hidden {
    overflow: hidden;
}

.inline-b {
    display: inline-block;
}

.width20p {
    width: 20%;
}

.width25p {
    width: 25%;
}

.width35p {
    width: 35%;
}

.width48p {
    width: 48%;
}

.width50p {
    width: 50%;
}

.border-b {
    border-bottom: 1px solid $borderColor;
}

.pointer {
    cursor: pointer;
} // margin padding
.plr5 {
    padding-left: 5px;
    padding-right: 5px;
}

.pl10 {
    padding-left: 10px;
}

.p20 {
    padding: 20px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb30 {
    padding-bottom: 30px;
}

.pt20 {
    padding-top: 20px;
}

.ptb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ptb20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.plr20 {
    padding-left: 20px;
    padding-right: 20px;
}

.plr30 {
    padding-left: 30px;
    padding-right: 30px;
}

.pl20 {
    padding-left: 20px;
}

.pr20 {
    padding-right: 20px;
}

.pb20 {
    padding-bottom: 20px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.mt20 {
    margin-top: 20px;
}

.ml20 {
    margin-left: 20px;
}

.ml60 {
    margin-left: 60px;
}

.mr20 {
    margin-right: 20px;
}

.mlr20 {
    margin-left: 20px;
    margin-right: 20px;
}

// font-size
.fs24 {
    font-size: 24px;
}

.fs22 {
    font-size: 22px;
}

.fs20 {
    font-size: 20px;
}

.fs18 {
    font-size: 18px;
}

// 头部
.y-header {
    position: relative;
    background-color: $header;
    height: 80px;
    line-height: 80px;
    .y-logo {
        display: block;
        height: 40px;
        margin: 20px 36px 0 20px;
    }
    .y-nav-li {
        float: left;
        margin-right: 24px;
        .y-nav-text {
            font-size: 18px;
            color: #fff;
        }
        &.active {
            .y-nav-text {
                color: $navActive;
            }
        }
    }
    .y-header-r {
        cursor: pointer;
        .left {
            color: #fff;
            text-decoration: none;
            margin-left: 24px;
        }
        .y-login-user {
            height: 20px;
            margin-bottom: -4px;
            margin-right: 5px;
        }
        .y-login-name {
            color: $loginName;
        }
        .y-skin {
            cursor: pointer;
            height: 25px;
            margin-top: 28px;
            margin-left: 35px;
        }
        .y-filterList {
            .y-replace {
                background-color: #2d3559 !important;
                color: #fff;
                .y-current {
                    &.current-height {
                        height: 80px;
                        line-height: 80px;
                    }
                    &:after {
                        background: url(../images/icon/login_arrow.png) no-repeat
                    }
                }
                .y-options {
                    margin-top: -15px;
                    &.options-width {
                        width: 150px;
                        left: -48px;
                    }
                }
            }
        }
    }
}

.y-hasLogin {
    position: absolute;
    top: 80px;
    right: 70px;
    width: 300px;
    background-color: #fff;
    z-index: 100;
    line-height: normal;
    -moz-box-shadow: 2px 2px 10px #eee; 
    -webkit-box-shadow: 2px 2px 10px #eee; 
    box-shadow: 2px 2px 10px #eee;
    .y-property {
        padding: 20px 20px 5px;
        color: #000;
        font-size: 18px;
        border-bottom: 1px solid $borderColor;
        .y-property-count{
            padding-top: 20px;
            font-size: 36px;
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(#fe8e26, 1)), to(rgba(#f56724, 1)));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #fe8e26;
        }
        .y-unit {
            font-size: 24px;
            padding-left: 5px;
        }
    }
    .y-commission {
        padding: 10px 20px;
        font-size: 18px;
        color: #000;
        .j-payment-card {
            padding: 0;
        }
    }
    .y-hasLogin-menu-ul {
        li {
            position: relative;
        }
        .y-hasLogin-menu {
            position: relative;
            display: block;
            padding: 10px 20px 10px 50px;
            font-size: 18px;
            color: #000;
            &.active {
                background-color: #eee;
            }
            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 20px;
                width: 23px;
                height: 23px;
                margin-top: -12px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 20px;
                width: 8px;
                height: 14px;
                margin-top: -7px;
                background-size: cover;
                background-repeat: no-repeat;
                background-image: url('../images/icon/next-light.png');
            }
            &.no-next:after {
                background-image: none;
            }
            &.y-hasLogin-menu1:before {
                background-image: url('../images/icon/login-menu-light1.png');
            }
            &.y-hasLogin-menu2:before {
                background-image: url('../images/icon/login-menu-light2.png');
            }
            &.y-hasLogin-menu3:before {
                background-image: url('../images/icon/login-menu-light3.png');
            }
            &.y-hasLogin-menu4:before {
                background-image: url('../images/icon/login-menu-light4.png');
            }
            &.y-hasLogin-menu5:before {
                background-image: url('../images/icon/login-menu-light5.png');
            }
            &.y-hasLogin-menu6:before {
                background-image: url('../images/icon/login-menu-light6.png');
            }
            &.y-hasLogin-menu7:before {
                background-image: url('../images/icon/login-menu-light7.png');
            }
        }
        .y-menu-status {
            position: absolute;
            display: inline-block;
            top: 10px;
            right: 20px;
            font-size: 16px;
            line-height: 28px;
            color: #ea8025;
        }
    }
}

.y-filterList {
    .y-select-box {
        display: none;
    }
    .y-replace {
        background-color: #fff !important;
        box-sizing: border-box;
        cursor: default;
        overflow: visible;
        position: relative;
        color: #000;
        z-index: 2;
        .y-current {
            position: relative;
            text-align: left;
            padding-right: 20px;
            &:after {
                position: absolute;
                right: 10px;
                top: 50%;
                margin-top: -4px;
                content: '';
                width: 13px;
                height: 8px;
            }
        }
        .y-options {
            position: absolute;
            display: none;
            margin-top: 0;
            line-height: 30px;
            padding: 4px 0;
            color: #000;
            background-color: #fff;
            z-index: 1;
            text-align: center;
            &.options-width {
                width: 100%;
            }
            li {
                cursor: pointer;
                padding: 12px 18px;
                &:hover {
                    color: #000;
                    background-color: #eee;
                }
            }
        }
    }
} // 当前位置
.y-main-content {
    margin: 20px;
}

.y-location {
    height: 80px;
    line-height: 80px;
    margin: 20px 0;
    padding: 0 20px;
    background-color: $menuBg;
    .first-location {
        font-size: 24px;
        color: $lastLocation;
    }
    .pre-location {
        font-size: 20px;
        color: $lastLocation;
    }
    .on-location {
        font-size: 20px;
        color: $navActive;
    }
    .location-ico {
        margin: 34px 15px 0;
    }
    .y-explain {
        color: $menuText;
    }
}

// left menu
.y-menu-box {
    width: 300px;
    margin-right: 20px;
    background-color: $menuBg;
    overflow: hidden;
    .y-menu {
        width: 320px;
    }
    .y-menu-li {
        position: relative;
        &.active {
            .y-menu-text {
                color: #fff;
                background-color: $menuActiveBg;
                &:before {
                    background-color: #fff !important;
                }
            }
        }
        .y-menu-text {
            position: relative;
            display: block;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            padding: 0 20px 0 60px;
            color: $menuText;
            &.has-subMenu {
                &:after {
                    width: 14px;
                    height: 8px;
                    margin-top: -4px;
                    background: url('../images/icon/subMenu.png') no-repeat;
                }
            }
            &:hover {
                color: #fff;
                background-color: $menuActiveBg;
            }
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 16px;
                display: inline-block;
                width: 8px;
                height: 14px;
                margin-top: -7px;
                background: url('../images/icon/next-light.png') no-repeat;
                background-size: cover;
            }
            &:before {
                position: absolute;
                content: '';
                display: block;
                width: 10px;
                height: 10px;
                top: 50%;
                margin-top: -5px;
                left: 40px;
                border-radius: 50%;
            }
            &.menu1:before {
                background-color: #fa6e0a;
            }
            &.menu2:before {
                background-color: #19ceb5;
            }
            &.menu3:before {
                background-color: #9956b5;
            }
            &.menu4:before {
                background-color: #00ccff;
            }
            &.menu5:before {
                background-color: #2ac370;
            }
            &.menu6:before {
                background-color: #1a67b7;
            }
        }
        .y-message {
            position: absolute;
            color: $unread;
            font-size: 16px;
            top: 50%;
            right: 30px;
            margin-top: -12px;
        }
    }
    .y-subMenu {
        display: none;
        margin: 0 20px;
        .y-subMenu-li {
            margin: 10px 0;
            padding: 10px 0;
            border-radius: 5px;
            &.active {
                background-color: $subMenuBg;
                .y-subMenu-text {
                    color: #fff;
                }
            }
            &:hover {
                background-color: $subMenuBg;
                .y-subMenu-text {
                    color: #fff;
                }
            }
            .y-subMenu-text {
                display: block;
                font-size: 18px;
                color: $menuText;
                padding-left: 45px;
            }
        }
    }
}

// 主内容
.y-content-r {
    display: block;
    margin-left: 320px;
    background-color: $menuBg;
    .y-location-r {
        position: relative;
        height: 40px;
        line-height: 40px;
        padding-left: 34px;
        font-size: 20px;
        color: $menuText;
        border-bottom: 1px solid $borderColor;
        &:before {
            position: absolute;
            content: '';
            display: block;
            width: 4px;
            height: 26px;
            top: 7px;
            left: 20px;
            background-color: #88bcff;
        }
    }
}

// 场外交易
.y-content-r {
    .y-filterList {
        .y-replace {
            .y-current {
                &:after {
                    position: absolute;
                    right: 0px;
                    margin-top: 0px;
                    background: url(../images/icon/tableIco2-light.png) no-repeat
                }
            }
            .y-options {
                z-index: 3;
                &.options-width {
                    width: 120px;
                    left: 50%;
                    margin-left: -60px;
                }
            }
        }
    }
}

.y-main-content-r {
    overflow-y: auto;
}

.y-table-th {
    display: table;
    width: 100%;
    padding: 20px 0;
}

.y-table-text {
    line-height: 30px;
    font-size: 16px;
    color: #000;
}

.y-searchCoins {
    position: relative;
    margin-top: 3px;
    margin-left: 10px;
    .y-search-input {
        display: block;
        width: 80px;
        font-size: 16px;
        padding: 2px 23px 2px 16px;
    }
    .y-searchBar {
        position: absolute;
        right: 12px;
        top: 50%;
        margin-top: -11px;
    }
}

.y-input {
    display: inline-block;
    background-color: #f6f6f6;
    border: 1px solid #fff;
    outline: none;
    border-radius: 20px;
    font-size: 18px;
    padding: 2px 23px 2px 16px;
    color: #fff;
}

.y-sortIcon {
    vertical-align: -4px;
}

.trade-ul {
    margin: 0 20px 20px;
    .trade-li {
        position: relative;
        display: table;
        width: 100%;
        padding: 20px 0;
    }
    .y-headerName,
    .y-buy-headerName {
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-top: 3px;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        font-size: 24px;
    }
    .y-trade-person {
        font-size: 18px;
        color: $textColor;
    }
    .y-trade-code {
        font-size: 18px;
        color: $clabel;
    }
    .y-cny-text {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        padding: 0 25px;
        font-size: 18px;
        color: $textColor;
        background-color: transparent;
        border: 1px solid $borderColor;
        border-radius: 20px;
        font-family: monospace;
    }
    .y-trade-price {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        padding: 0 25px;
        font-size: 18px;
        color: $priceColor;
        background-color: #fbe2cd;
        border: 1px solid #f4bf92;
        border-radius: 20px;
    }
    .trade-buy {
        position: absolute;
        top: 0;
        left: -20px;
        width: 100%;
        padding: 20px;
        background-color: $tradeBugBg;
        z-index: 1;
        box-shadow: 3px 5px 5px #ebebeb;
        .y-trade-limitPrice {
            font-size: 20px;
            color: #000;
        }
        .y-price {
            color: #f08e3a;
        }
        .y-trade-ways {
            margin-top: 55px;
        }
        .y-trade-way {
            display: inline-block;
            line-height: 40px;
            padding-right: 10px;
            font-size: 18px;
            color: #000;
            img {
                margin-bottom: -12px;
            }
        }
        .y-trade-data {
            margin-left: 30px;
        }
        .y-trade-inputBox {
            width: 140px;
            padding: 0 10px;
            background: #f6f6f6;
            border: 1px solid $borderColor;
            border-radius: 3px;
        }
        .y-trade-input {
            width: 80px;
            padding: 3px 0;
            height: 32px;
            line-height: 32px;
            border: none;
            background-color: transparent;
        }
        .y-trade-inputLabel {
            font-size: 16px;
            line-height: 35px;
            color: #999;
        }
        .y-trade-chageIco {
            margin: 10px 5px;
        }
        .y-trade-remark {
            display: block;
            margin-top: 10px;
            font-size: 14px;
            color: #000;
        }
        .y-trade-btns {
            .y-btn {
                margin-left: 10px;
            }
        }
        .y-trade-tip {
            position: absolute;
            bottom: 30px;
            right: 40px;
            font-size: 16px;
            color: #000;
            text-align: right;
        }
    }
}

// 购买 弹窗
.y-pop-location {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 10px 30px 10px 45px;
    font-size: 24px;
    color: $menuText;
    border-bottom: 1px solid $borderColor;
    &:before {
        position: absolute;
        content: '';
        display: block;
        width: 4px;
        height: 30px;
        top: 18px;
        left: 30px;
        background-color: #148cde;
    }
}

.pop_box {
    background-color: #fff;
    color: #000;
    .pop_desc {
        border-color: #dcdcdc;
    }
    .y-popOrder-pay {
        position: relative;
        padding: 10px 30px;
        font-size: 20px;
        border-bottom: 1px solid $borderColor;
        line-height: 40px;
    }
    .y-popPay-ico {
        width: 40px;
        margin-right: 10px;
        margin-bottom: -11px;
    }
    .y-popPay-nextIco {
        width: 7px;
        margin-top: -2px;
        margin-left: 6px;
    }
    .y-pop-otherPay {
        position: absolute;
        top: 60px;
        left: 20px;
        right: 20px;
        padding: 0 10px 10px;
        background-color: #fff;
        text-align: left;
    }
    .y-pop-remark {
        font-size: 16px;
        color: #ff561b;
    }
    .y-popData-ico {
        width: 25px;
        margin-top: -7px;
    }
    .text-l {
        text-align: left;
    }
    .y-restTime-ico {
        width: 20px;
    }
    .y-checkbox {
        width: 22px;
    }
    .y-pay-checkobox {
        width: 22px;
        display: none;
    }
    .y-checkbox {
        display: inline-block;
        width: 22px;
        height: 25px;
        margin: 0 10px -4px 0;
        background-size: contain;
        background-repeat: no-repeat;
        &.none {
            display: none;
        }
    }
    .y-check {
        background-image: url('../images/icon/select-light.png');
    }
    .y-checked {
        background-image: url('../images/icon/select_active-light.png');
    }
    .y-option-ico {
        width: 35px;
        margin-right: 8px;
        margin-bottom: -11px;
    }
    .y-pop-filterList {
        padding: 20px 20px 60px;
        text-align: left;
        font-size: 20px;
        border-bottom: 1px solid $borderColor;
        .y-replace {
            background-color: #242b47;
            border-radius: 4px;
            padding: 0 20px;
            border: 1px solid $borderColor;
            .options-width {
                text-align: left;
                left: 0;
            }
            .y-current {
                &.current-height {
                    height: 50px;
                    line-height: 50px;
                }
                &:after {
                    background: url(../images/icon/login_arrow-light.png) no-repeat
                }
            }
        }
    }
    .y-pop-input-box {
        background-color: #f6f6f6;
        border-radius: 4px;
        padding: 0 20px;
        margin: 0 20px 50px;
        border: 1px solid $borderColor;
        &.y-pop-link-input {
            margin: 0;
            .y-pop-input {
                font-size: 18px;
            }
        }
        .y-pop-input {
            height: 50px;
            line-height: 50px;
            width: 100%;
            padding: 0;
            font-size: 20px;
            border: none;
        }
    }
    .y-pop-textarea-box {
        background-color: #f6f6f6;
        border-radius: 4px;
        padding: 20px;
        border: 1px solid $borderColor;
        .y-pop-textarea {
            height: 60px;
            line-height: 25px;
            width: 100%;
            padding: 0;
            font-size: 18px;
            border: none;
            resize: none;
            border-radius: 0;
        }
    }
    .y-pop-receiptTips {
        font-size: 16px;
        color: $clabel;
    }
}

// table
.y-table {
    width: 100%;
    border-collapse: collapse;
    th {
        padding: 10px 0;
        text-align: center;
    }
    .y-table-head {
        th {
            border-bottom: 1px solid $borderColor;
        }
    }
    .y-table-body {
        tr {
            td:first-child {
                padding-left: 20px;
            }
            td:last-child {
                padding-right: 20px;
            }
        }
        .y-div-td {
            padding: 20px 0;
            text-align: center;
            font-size: 20px;
            color: #000;
            border-bottom: 1px solid $borderColor;
            &.y-order-color {
                color: #000;
            }
        }
        .y-dot {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: -18px;
                width: 10px;
                height: 10px;
                margin-top: -5px;
                border-radius: 50%;
            }
            &.y-green-dot {
                &:before {
                    background-color: #22ac38;
                }
            }
            &.y-red-dot {
                &:before {
                    background-color: #e94323;
                }
            }
        }
        .y-td-status {
            position: relative;
            display: inline-block;
            padding-left: 35px;
            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 24px;
                height: 24px;
                margin-top: -12px;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        .y-appeal {
            &:before {
                background-image: url("../images/icon/appealIco.png");
            }
        }
        .y-on-way {
            &:before {
                background-image: url("../images/icon/onWayIco.png");
            }
        }
        .y-finish {
            &:before {
                background-image: url("../images/icon/finishIco.png");
            }
        }
        .y-undo {
            &:before {
                background-image: url("../images/icon/undoIco.png");
            }
        }
        .y-cancel {
            &:before {
                background-image: url("../images/icon/cancelIco.png");
            }
        }
    }
}

// 订单详情
.y-orderDes-head {
    font-size: 20px;
    padding: 20px 0;
    color: $textColor;
    .y-order-status {
        font-size: 24px;
        color: $textColor;
    }
    .y-orderStatus-img {
        width: 35px;
        margin-bottom: -8px;
        margin-right: 5px;
    }
    .y-order-note {
        display: inline-block;
        font-size: 20px;
        color: $textColor;
    }
}

.y-orderDes-body {
    line-height: 22px;
    font-size: 18px;
    color: $textColor;
    border-top: 1px solid $borderColor;
    .y-orderDes-type.fs22 {
        font-size: 22px;
    }
    .y-orderDes-data {
        padding: 20px 0;
    }
}

// 详情页
.y-detail-title {
    padding: 20px 0;
    margin: 0 20px;
    font-size: 30px;
    color: $textColor;
    border-bottom: 1px solid $borderColor;
}

.y-detail-info {
    padding: 20px 0;
    margin: 0 20px;
    font-size: 16px;
    color: $clabel;
}

.y-detail-content {
    margin: 0 40px 0 20px;
    font-size: 18px;
    color: #333;
    line-height: 40px;
    img {
        display: block;
        max-width: 100%;
    }
    &.mt20 {
        margin-top: 20px;
    }
}

// 场外交易问题
.y-problem-box {
    margin-left: 2%;
}

.y-problem {
    width: 32%;
    padding-top: 10px;
}

.y-problem-li {
    font-size: 20px;
    margin: 0 30px;
    padding: 20px 0;
    color: $textColor;
    border-bottom: 1px solid $borderColor;
}

.y-no-open {
    margin-top: 200px;
    font-size: 48px;
    color: $noOpen;
    text-align: center;
}

// 活动公告
.y-active-searchBox {
    &.y-searchCoins {
        margin-top: 7px;
        margin-right: 20px;
        .y-search-input {
            padding: 3px 15px;
            width: 150px;
        }
    }
}

.y-active-slide {
    position: relative;
    margin: 20px 40px 0 0;
    padding-bottom: 20px;
    border-bottom: 1px solid $borderColor;
    .y_disvisible {
        visibility: hidden;
        z-index: -1;
    }
    .y-j_slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .y-active-imgBox {
        position: relative;
        width: 90%;
        overflow: hidden;
        margin: 0 auto;
        background-color: $activeImgBoxBg;
        img {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
        }
    }
    .y-slide-pages {
        position: absolute;
        top: 50%;
        right: 0px;
        margin-top: -33px;
        .y-slide-page {
            display: block;
            width: 6px;
            height: 30px;
            border-radius: 20px;
            background-color: $activeSlideDot;
            cursor: pointer;
            &.y-next-slide {
                margin-top: 6px;
            }
            &.y-slide-on {
                background-color: $activeSlideDotOn;
            }
        }
    }
}

.y-active-ul {
    margin: 0 30px;
    .y-active-li {
        padding: 20px 0;
        border-bottom: 1px solid $borderColor;
        .y-active-link {
            display: block;
            .y-active-text {
                color: $textColor;
                font-size: 20px;
            }
            .y-active-time {
                position: relative;
                color: $clabel;
                font-size: 18px;
                padding-right: 30px;
                &:after {
                    content: '';
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    margin-top: -9px;
                    width: 24px;
                    height: 18px;
                    background: url('../images/icon/go-light.png') no-repeat;
                    background-size: contain;
                }
            }
        }
    }
}

.y-page {
    width: 700px;
    margin: 0 auto;
    padding: 30px 0;
    .page-contain {
        float: none !important;
    }
    .pre-next,
    .current,
    .hiding,
    .tcdNumber,
    input {
        position: relative;
        background-color: transparent !important;
        border-radius: 5px;
        border: 1px solid $borderColor !important;
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        margin: 0 5px 0 0 !important;
        padding: 0 !important;
        color: $clabel;
        text-align: center;
    }
    .current {
        color: $pageOnText !important;
        background-color: $pageOnBg !important;
    }
    .hiding {
        border: none !important;
    }
    .pre-next {
        text-indent: -10000px;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -6px;
            margin-left: -4px;
            width: 8px;
            height: 13px;
            background-repeat: no-repeat;
            background-size: contain;
        }
        &.y-pre {
            &:before {
                background-image: url('../images/icon/pre-page.png');
            }
        }
        &.y-next {
            &:before {
                background-image: url('../images/icon/next-page.png');
            }
        }
    }
    .countYe {
        margin-left: 40px !important;
        line-height: 40px;
    }
    .turndown {
        width: auto !important;
        padding: 10px 30px;
        margin-left: 30px !important;
        color: $pageOnText !important;
        background-color: $pageOnBg;
        border-radius: 5px;
        border: 1px solid $borderColor !important;
    }
}

// 邀请返利
.y-rebate-top {
    position: relative;
    .y-header {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 80px;
        width: 100%;
        background-color: transparent;
        .y-filterList {
            .y-replace {
                background-color: transparent !important;
            }
        }
    }
    .y-banner {
        display: block;
        width: 100%;
    }
    .y-rebate-title {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -50px;
        width: 100%;
        text-align: center;
        color: #fff;
        .fs42 {
            font-size: 40px;
        }
        .fs48 {
            font-size: 46px;
        }
    }
}

.y-rebate-content {
    .y-menu {
        width: 320px !important;
    }
    .y-rebate-step {
        margin: 0 30px;
        font-size: 18px;
        color: $textColor;
        line-height: 50px;
        padding: 65px 0;
        border-bottom: 1px solid $borderColor;
        .y-step-img {
            display: inline-block;
            width: 70%;
        }
    }
    .y-invite-box {
        margin: 30px;
        .y-invite-code {
            width: 60%;
            font-size: 18px;
            color: $textColor;
            line-height: 30px;
            border-right: 1px solid $borderColor;
        }
        .y-invite-data {
            width: 40%;
            padding: 0 2%;
            margin-right: 5%;
            font-size: 20px;
            height: 30px;
            line-height: 30px;
            color: $inviteText;
            border: 1px solid #f6f6f6;
            background-color: #f6f6f6;
        }
    }
    .y-invited-box {
        font-size: 26px;
        width: 35%;
        .y-invited-remark {
            margin-top: 15px;
            font-size: 18px;
            color: $textColor;
        }
        img {
            height: 35px;
            margin-bottom: -10px;
            margin-right: 5px;
        }
    }
    .y-invite-person {
        color: $invitePerson;
    }
    .y-invite-reward {
        color: $unread;
    }
    .y-invite-des {
        font-size: 18px;
        padding-right: 30px;
    }
}

.y-price,
.y-tips-text {
    color: $priceColor;
}

.y-btn {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 25px;
    font-size: 18px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    &.y-plain-btn {
        border-radius: 4px;
    }
    &.y-small-btn {
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        padding: 0 20px;
    }
    &.y-md-btn,
    &.y-lg-btn {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
    }
    &.y-md-btn {
        min-width: 200px;
    }
    &.y-lg-btn {
        width: 100%;
    }
}

.y-primary-btn {
    color: #fff;
    background-color: $primaryBtn;
}

.y-orange-btn {
    color: #fff;
    background-color: $orangeBtn;
}

.y-orderAppeal-btn {
    color: #fff;
    background-color: $orderAppealBtn;
}

.y-lilace-btn {
    color: #fff;
    background-color: $lilaceBtn;
}

.y-popCancel-btn {
    color: #fff;
    background-color: $popCancelBtn;
}

.y-popReturn-btn {
    color: #fff;
    background-color: $popCancelBtn;
}

.y-transparent-btn {
    color: #000;
    background-color: transparent;
    border: 1px solid #fff;
}